<template>
  <div class="home">
    <div>这是一个测试</div>
    <div class="container">这里有背景色</div>
    <div>这里有按钮</div>
    <div>
      <el-button>按钮001</el-button>
      <el-button type="primary">按钮002</el-button>
      <el-button type="warning">按钮003</el-button>
    </div>
    <div>
      <el-button  @click="changeTheme">颜色1</el-button>
      <el-button  @click="changeTheme2">颜色2</el-button>
    </div>
    <div>
      <el-color-picker v-model="color1" size="large" @change="setColor" />
    </div>
    <div>

    </div>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  data () {
    return {
      color1: ''
    }
  },
  methods: {
    setColor (e) {
      document.documentElement.style.setProperty('--main', e)
    },
    changeTheme () {
      // 第一个"background-main-color" 指的是mixin中我们自定义声明的名称，"background-main-color2"指的是我们传的参数，相当于mixin中的 $color，如果条件成立则会用下面的样式。
      window.document.documentElement.setAttribute('background-main-color', 'background-main-color2')
    },
    changeTheme2 () {
      // 第一个"background-main-color" 指的是mixin中我们自定义声明的名称，"background-main-color2"指的是我们传的参数，相当于mixin中的 $color，如果条件成立则会用下面的样式。
      window.document.documentElement.setAttribute('background-main-color', 'background-main-color')
    }

  },

  components: {

  }
}
</script>
<style lang="scss">
@import '../theme/mixin.scss';
:root{
  --main:#409eff;
  --el-color-primary: var(--main);
}
.container{
  //background-main-color 为mixin中定义的名称，括号里为theme中声明的值。解析为 background:"#E9EDF0"
  @include background-main-color($background-main-color1);
}
</style>
